<template>
  <div class="login-wrap">




  <el-form :rules="rules" class="login-container" label-position="left" :model="loginForm" ref="loginFormRef">
    <h3 class="login_title">系统登录</h3>
    <el-form-item prop="username">
    <el-input  v-model="loginForm.username"  placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox class="login_remember" v-model="checked"
                 label-position="left">记住密码</el-checkbox>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 30%" @click="login">登录</el-button>
      <el-button type="primary" style="width: 30%" @click="signIn">注册</el-button>
    </el-form-item>
  </el-form>




  </div>
</template>
<script>
  export default{
    data(){
      return {
        rules: {
          username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}]
        },
        checked: true,
        loginForm: {
          username: '',
          password: ''
        },

      }
    },
    methods: {
      login () {
    //获取表单对象之后进行数据校验
         //valid 表示校验的结果 true表示通过  false表示失败
         this.$refs.loginFormRef.validate(async valid => {
            //如果没有完成校验则直接返回
            if(!valid) return

            //如果校验成功,则发起ajax请求
           const {data: result} = await this.$http.post('/user/login',this.loginForm)
           // const {data: result} =  axios.post('/user/login',this.loginForm)
           console.log(result)
           if(result.status !== 200) return this.$message.error("用户登录失败")
           this.$message.success("用户登陆成功")

           //获取用户token信息
           let token = result.data
           window.sessionStorage.setItem("token",token)

           //用户登录成功之后,跳转到home页面
           this.$router.push("/home")
         })


      },
     signIn(){
       this.$router.push("/signIn");
     }
    }
  }
</script>
<style>
  .login-wrap {
    position: fixed;
    background-image: url(../assets/bj.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
  }
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .login_remember {
    margin: 0px 0px 35px 0px;
    text-align: left;
  }
</style>
